<html>
<head>
    <title>GEWebRTC (Phase 1: Google Chrome only)</title>
    <script src="sincity.js" type="text/javascript"> </script>
</head>

<script type="text/javascript">

var callSession = null;
var pendingOffer = null;

function save() {
    window.localStorage.setItem('sincity.conn_url', txtConnUrl.value);
    window.localStorage.setItem('sincity.localId', txtLocalId.value);
    window.localStorage.setItem('sincity.remote_id', txtRemoteId.value);
}

function connect() {
    save();
    
    SCEngine.init (
        {
            "localId": txtLocalId.value,
            "localVideo": localVideo,
            "remoteVideo": remoteVideo,
            "remoteAudio": remoteAudio,
            "iceServers": []
        }
    );
    SCEngine.connect(txtConnUrl.value);
}

function buildCallConfig() {
    return {
        audio_send: cbAudioSend.checked,
        audio_recv: cbAudioReceive.checked,
        audio_remote_elt: remoteAudio,
        video_send: cbVideoSend.checked,
        video_recv: cbVideoReceive.checked,
        video_local_elt: localVideo,
        video_remote_elt: remoteVideo
    };
}

function call() {
    save();
    
    if (callSession) { // already in call?
        callSession.hangup();
        callSession = null;
        btnCall.value = "call";
        txtInfo.innerHTML = "Call terminated";
        return;
    }
    
    if (pendingOffer) { // is there a pending offer?
        var po = pendingOffer;
        pendingOffer = null;
        callSession = SCCall.build(po, buildCallConfig());
        callSession.acceptMsg(po);
    }
    else {
        callSession = SCCall.build(txtRemoteId.value, buildCallConfig());
        if (!callSession) {
            txtInfo.innerHTML = "<font color='red'>Failed to make call(1)</font>";
            return;
        }
        if (!callSession.call()) {
            txtInfo.innerHTML = "<font color='red'>Failed to make call(2)</font>";
            return;
        }
    }
    btnCall.value = "hangup";
}

function update() {
    if (callSession) {
        txtInfo.innerHTML = "<font color='blue'>Update call</font>";
        callSession.call(buildCallConfig());
    }
}

function disconnect() {
    if (callSession) {
        callSession.hangup();
        callSession = null;
        btnCall.value = "call";
    }
    SCEngine.disconnect();
}

function checkboxClick(cb) {
    if (cb === cbAudioSend) {
        window.localStorage.setItem('sincity.audio_send', cbAudioSend.checked ? "true" : "false");
    }
    else if (cb === cbAudioReceive) {
        window.localStorage.setItem('sincity.audio_receive', cbAudioReceive.checked ? "true" : "false");
    }
    else if (cb === cbVideoSend) {
        window.localStorage.setItem('sincity.video_send', cbVideoSend.checked ? "true" : "false");
    }
    else if (cb === cbVideoReceive) {
        window.localStorage.setItem('sincity.video_receive', cbVideoReceive.checked ? "true" : "false");
    }
    update();
}

window.onload = function() {
    txtConnUrl.value = window.localStorage.getItem('sincity.conn_url') || "ws://ns313841.ovh.net:80/wsStringStaticMulti?roomId=0";
    txtLocalId.value = window.localStorage.getItem('sincity.localId') || "002";
    txtRemoteId.value = window.localStorage.getItem('sincity.remote_id') || "001";
    cbAudioSend.checked = window.localStorage.getItem('sincity.audio_send') === "true";
    cbAudioReceive.checked = window.localStorage.getItem('sincity.audio_receive') === "true";
    cbVideoSend.checked = window.localStorage.getItem('sincity.video_send') === "true";
    cbVideoReceive.checked = (window.localStorage.getItem('sincity.video_receive') !== "false"); // backward compatibility
    
    SCEngine.onconnected = function() {
        btnConnect.disabled = true;
        btnDisConnect.disabled = false;
        btnCall.disabled = false;

        txtInfo.innerHTML = "<font color='green'>Connected</font>";
    }

    SCEngine.ondisconnected = function() {
        btnConnect.disabled = false;
        btnDisConnect.disabled = true;
        btnCall.disabled = true;

        txtInfo.innerHTML = "<font color='red'>Disconnected</font>";
    }

    SCEngine.oncall = function(e) {
        switch (e.type) {
            case "offer":
                {
                    // to reject the call:
                    // SCCall.rejectMsg(e.msg); 
                    pendingOffer = e.msg;
                    txtInfo.innerHTML = "<font color='blue'>" + e.description + "</font>";
                    btnCall.value = "accept";
                    break;
                }
            case "answer":
            case "pranswer":
            case "hangup":
                {
                    if (callSession && callSession.cid == e.msg.cid) {
                        callSession.acceptMsg(e.msg);
                        if (e.type === "hangup") {
                            callSession = null;
                            txtInfo.innerHTML = "<font color='black'>Call terminated</font>";
                            btnCall.value = "call";
                        }
                        else {
                            txtInfo.innerHTML = "<font color='blue'>" + e.description + "</font>";
                        }
                    }
                    else {
                        if (e.type === "hangup" && pendingOffer && pendingOffer.cid == e.msg.cid) {
                            pendingOffer = null;
                            txtInfo.innerHTML = "<font color='blue'>cancelled</font>";
                        }
                        else {
                            txtInfo.innerHTML = "<font color='red'>Failed to match call session</font>";
                        }
                    }
                    break;
                }
            case "error":
                {
                    if (callSession && callSession.cid == e.call.cid) {
                        callSession.hangup();
                        callSession = null;
                        btnCall.value = "call";
                        txtInfo.innerHTML = "<font color='red'>" + e.description + "</font>";
                    }
                    break;
                }
            case "info":
                {
                    txtInfo.innerHTML = "<font color='gray'>" + e.description + "</font>";
                    break;
                }
        }
    }
}

</script>

<body>
    <table width="90%">
        <tr>
            <td><label>ConnectionURL:&nbsp;&nbsp;</label></td>
            <td style="width: 100%;"><input type="text" style="width: 100%;" id="txtConnUrl"
                                placeholder="ws://ns313841.ovh.net:9000/wsStringStaticMulti?roomId=0" /></td>
        </tr>
        <tr>
            <td>LocalId:&nbsp;&nbsp;</td>
            <td style="width: 100%;"><input type="text" style="width: 100%;" id="txtLocalId"/></td>
        </tr>
        <tr>
            <td>RemoteId:&nbsp;&nbsp;</td>
            <td style="width: 100%;"><input type="text" style="width: 100%;" id="txtRemoteId"/></td>
        </tr>
        <tr>
            <td colspan="2"><label style="width: 100%;" id="txtInfo"> </label></td>
        </tr>
        <tr>
            <td colspan="2">
                <hr />
                <input type="checkbox" id="cbAudioSend" name="cbAudioSend" onclick='checkboxClick(this);'/>&nbsp;Send <font color='red'>audio</font> <br />
                <input type="checkbox" id="cbAudioReceive" name="cbAudioReceive" onclick='checkboxClick(this);' />&nbsp;Receive <font color='red'>audio</font> <br />
                <input type="checkbox" id="cbVideoSend" name="cbVideoSend" onclick='checkboxClick(this);' />&nbsp;Send <font color='blue'>video</font> <br />
                <input type="checkbox" id="cbVideoReceive" name="cbVideoReceive" onclick='checkboxClick(this);' />&nbsp;Receive <font color='blue'>video</font>
            </td>
        </tr>
    </table>
    <hr />
    
    <input type="button" id="btnConnect" onclick='connect();' value="connect" />
    <input type="button" id="btnCall" onclick='call();' disabled value="call" />
    <input type="button" id="btnDisConnect" onclick='disconnect();' disabled value="disconnect" />
    
    <hr />
    <video id="localVideo" width="44px" height="36px" autoplay="autoplay" muted="true"></video>
    <hr />
    <video id="remoteVideo" autoplay="autoplay"></video>
    <audio id="remoteAudio" autoplay="autoplay" />
</body>
</html>